<template>
  <div class="total-bg" :class="{ hide: isHidden }">
    <base-left-card>
      <template #left-body>
        <div class="top-title-bg">
          <img src="@/assets/icons/svg/overview/overview_location.svg" alt="" />
          <span>大连会议中心</span>
        </div>
        <!-- <dashboard-card title="线网"></dashboard-card> -->
         <func-list v-if="!showDetail" @twinsChange="twinsChange" @twinsInstanceChange="twinsInstanceChange" @viewsChange="viewsChange"></func-list>
         <detail v-model:show="showDetail" v-if="showDetail" :list-data="listData" :type="type"></detail>
      </template>
    </base-left-card>
  </div>
</template>

<script setup>
import useUserStore from '@/stores/base'
import BaseLeftCard from '@/components/BaseLeftCard/index.vue'
import FuncList from './FuncList.vue'
import Detail from './detail/index.vue'

import { quaryUserList } from '@/api/base'
import { queryTwins } from '@/ssp' 
import { ref } from 'vue'
const userStore = useUserStore()
const { proxy } = getCurrentInstance()

const isHidden = ref(false)
const showDetail = ref(false)
const listData = ref([])
const type = ref(1)

const enterDetail = async () => {
  isHidden.value = true
}

onMounted(() => {
  getList()
  proxy.$eventBus.on('custom-event', handleEvent)
})

onUnmounted(() => {
  proxy.$eventBus.off('custom-event', handleEvent)
})

const handleEvent = async (data) => {
  console.log('handleEvent====', data)
  // console.log('ssp=====', twins)
}

const getList = async () => {
  try {
    const res = await quaryUserList()
    // console.log('getList===', res)
  } catch (error) {
    console.log(error)
  }
}

const twinsChange = (value) => {
  console.log('twinsChange====', value)
  manuData(1, value)
}

const twinsInstanceChange = (value) => {
  console.log('twinsInstanceChange====', value)
  manuData(2, value)
}

const viewsChange = (value) => {
  console.log('viewsChange====', value)
  manuData(3, value)
}

const manuData = (typeValue, value)=> {
  type.value = typeValue
  listData.value = value
  showDetail.value = true
}

</script>
<style scoped lang='scss'>
.total-bg {
  z-index: 3;
  transition: opacity 0.5s ease-out;

  .top-title-bg {
    display: flex;
    align-items: center;
    margin-left: 25px;

    img {
      width: 20px;
      height: 21px;
      margin-right: 10px;
    }

    span {
      font-family: YouSheBiaoTiHei-2;
      font-weight: 400;
      font-size: 24px;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      color: #fff;
      // background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 37%, #B4CFF2 100%);
    }
  }

  .plan-detail {
    height: 25px;
    width: 304px;
    background-image: url('@/assets/icons/svg/overview/overview_detail.svg');

    font-family: Source Han Sans, Source Han Sans;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    line-height: 14px;
    text-align: right;
    font-style: normal;
    text-align: center;
    line-height: 25px;
    margin-left: 38px;
    margin-top: 10px;
    cursor: pointer;
  }

}

.hide {
  opacity: 0; /* 移动到右边，隐藏视图 */
}
</style>